<template>
  <a-space>
    <a-range-picker @change="search" v-model="searchValue.time" :style="{ width: 300 + 'px' }" :allow-clear="false" shortcuts-position="left" :shortcuts="rangeShortcuts()" />
    <a-button class="gray-outline" @click="search">搜索</a-button>
  </a-space>
  <!-- <showStatics class="mt5" :list="list" /> -->

  <a-table class="mt5 table-two-line" :loading="tableLoading" size="mini" @sorter-change="sorterChange" :pagination="false" :data="tableDate" :scroll="{ y: '300px', x: '100%' }">
    <template #columns>
      <a-table-column :width="45" title="序号" fixed="left">
        <template #cell="{ rowIndex }">
          <p>{{ rowIndex + 1 }}</p>
        </template>
      </a-table-column>
      <a-table-column :width="160" title="广告位" fixed="left">
        <template #cell="{ record }">
          <p>{{ PlacementMap[record.placement] || record.placement }}</p>
        </template>
      </a-table-column>
      <a-table-column :width="120" title="竞价策略" fixed="left">
        <template #cell="{ record }">
          <p>{{ DynamicBudgetStrategy[record.dynamicBudgetStrategy] }}</p>
        </template>
      </a-table-column>
      <a-table-column :width="80" title="竞价调整">
        <template #cell="{ record }">
          <div class="flex-c">
            <p v-if="record.placementBidding || record.placementBidding === 0">{{ record.placementBidding }}%</p>
            <p v-else>--</p>
            <!-- 暂时只支持SP广告活动编辑 -->
            <a-popconfirm v-if="props.info.adType === 'SPONSORED_PRODUCTS'" v-model:popup-visible="record.isPopup1" @popup-visible-change="editVal = record.placementBidding" @ok="updateSingle(record)">
              <template #content>
                <p class="popconfirm-title">竞价调整</p>
                <a-input-number v-model="editVal" style="width: 260px" placeholder="" allow-clear />
                <span>%</span>
              </template>
              <icon-edit :class="record.isPopup1 ? 'popup-edit-icon' : 'popup-edit-icon popup-edit-icon-hover'" />
            </a-popconfirm>
          </div>
        </template>
      </a-table-column>
      <a-table-column :width="85" :sortable="sortable" align="right" title="曝光量" data-index="impressions">
        <template #cell="{ record }">
          <p v-if="record.impressions || record.impressions === 0">{{ record.impressions }}</p>
          <p v-else>--</p>
        </template>
      </a-table-column>
      <a-table-column :width="85" align="right" :sortable="sortable" title="点击量" data-index="clicks">
        <template #cell="{ record }">
          <p v-if="record.clicks || record.clicks === 0">{{ record.clicks }}</p>
          <p v-else>--</p>
        </template>
      </a-table-column>
      <a-table-column :width="80" title="CTR" align="right" :sortable="sortable" data-index="ctr">
        <template #cell="{ record }">
          <p v-if="record.ctr || record.ctr === 0">{{ Number(record.ctr).toFixed(2) }}%</p>
          <p v-else>--</p>
        </template>
      </a-table-column>
      <a-table-column :width="95" title="广告销量" align="right" :sortable="sortable" data-index="purchasesSale">
        <template #cell="{ record }">
          <p v-if="record.purchasesSale || record.purchasesSale === 0">{{ record.purchasesSale }}</p>
          <p v-else>--</p>
        </template>
      </a-table-column>
      <a-table-column :width="80" title="CVR" align="right" :sortable="sortable" data-index="cvr">
        <template #cell="{ record }">
          <p v-if="record.cvr || record.cvr === 0">{{ Number(record.cvr).toFixed(2) }}%</p>
          <p v-else>--</p>
        </template>
      </a-table-column>

      <a-table-column :width="85" title="花费" align="right" :sortable="sortable" data-index="cost">
        <template #cell="{ record }">
          <p v-if="record.cost || record.cost === 0">${{ Number(record.cost).toFixed(2) }}</p>
          <p v-else>--</p>
        </template>
      </a-table-column>
      <a-table-column :width="80" title="CPC" align="right" :sortable="sortable" data-index="cpc">
        <template #cell="{ record }">
          <p v-if="record.cpc || record.cpc === 0">${{ Number(record.cpc).toFixed(2) }}</p>
          <p v-else>--</p>
        </template>
      </a-table-column>
      <a-table-column :width="120" title="广告销售额" align="right" :sortable="sortable" data-index="saleAmount">
        <template #cell="{ record }">
          <p v-if="record.saleAmount || record.saleAmount === 0">${{ Number(record.saleAmount).toFixed(2) }}</p>
          <p v-else>--</p>
        </template>
      </a-table-column>
      <a-table-column :width="85" title="ACOS" align="right" :sortable="sortable" data-index="acos">
        <template #cell="{ record }">
          <p v-if="record.acos || record.acos === 0">{{ Number(record.acos).toFixed(2) }}%</p>
          <p v-else>--</p>
        </template>
      </a-table-column>
      <a-table-column :width="85" title="ROAS" align="right" :sortable="sortable" data-index="roas">
        <template #cell="{ record }">
          <p v-if="record.roas || record.roas === 0">{{ Number(record.roas).toFixed(2) }}</p>
          <p v-else>--</p>
        </template>
      </a-table-column>
    </template>
  </a-table>
  <!-- <div class="pagination-footer mt10">
    <a-pagination size="mini" :total="pagination.total" :default-page-size="pagination.pageSize" :current="pagination.pageNum" :page-size-options="[20, 50, 100, 200, 300]" show-total show-page-size @page-size-change="sizeChange" @change="changePage" />
  </div> -->
</template>

<script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue'
  import { rangeShortcuts, getStartAndEndTime } from '../../../common'
  import { DynamicBudgetStrategy, PlacementMap, PlacementToPlacementMap } from '../../../types'
  import { getPlacementList, updatePlacement, updateAdGroup } from '@/api/advert'
  import { Message, Modal } from '@arco-design/web-vue'
  const props = defineProps(['info'])
  const sortable: any = reactive({
    sortDirections: ['descend', 'ascend'],
    sorter: true,
  })
  let searchValue = ref<any>({
    time: getStartAndEndTime('last_30_days'),
    orderItems: null,
  })

  let pagination = ref({ total: 0, pageSize: 20, pageNum: 1 })

  let submitLoading = ref(false)
  let tableLoading = ref(false)
  let tableDate = ref([])
  let editVal = ref()
  const search = () => {
    getTableList()
  }

  const sizeChange = (val: number) => {
    pagination.value.pageNum = 1
    pagination.value.pageSize = val
    getTableList()
  }
  const changePage = (val: number) => {
    pagination.value.pageNum = val
    getTableList()
  }

  // 排序
  const sorterChange = (dataIndex: string, direction: string) => {
    if (!direction) {
      searchValue.value.orderItems = null
    } else {
      searchValue.value.orderItems = [
        {
          asc: direction == 'ascend' ? true : false,
          column: dataIndex,
        },
      ]
    }
    getTableList()
  }

  const getTableList = async () => {
    let params = {
      campaignId: props.info.campaignId,
      pageNum: pagination.value.pageNum,
      pageSize: pagination.value.pageSize,
      startDate: searchValue.value.time[0],
      endDate: searchValue.value.time[1],
      adType: props.info.adType,
      shopId: props.info.shopId,
      orderItems: searchValue.value.orderItems,
    }
    tableLoading.value = true
    const res: any = await getPlacementList(params)
    tableLoading.value = false
    if (res) {
      pagination.value.total = res?.data?.total
      tableDate.value = res.data || []
    }
  }

  // 修改广告位竞价
  async function updateSingle(item: any) {
    if (!editVal.value) {
      Message.error('参数必填')
      return false
    }
    let params: any = {
      campaignId: item.campaignId,
      shopId: item.shopId,
      placement: PlacementToPlacementMap[item.placement] || item.placement,
      percentage: editVal.value,
      adType: props.info.adType,
    }
    submitLoading.value = true
    let res: any = await updatePlacement(params)
    submitLoading.value = false
    if (res) {
      Message.success('修改成功')
      getTableList()
    }
  }

  onMounted(() => {
    getTableList()
  })
</script>

<style lang="less" scoped></style>
